<script setup>
  // 为避免出现意外请搭配AsModal组件使用
  // 根据AsModal宽度自动计算占比
  // (一共24份)一行占比多少份
  // xs,sm,md,lg,xl多数情况下使用默认值即可
  // 注意: 当设置了span时,xs,sm,md,lg,xl将不在生效; 这意味着无论是xs,sm,md,lg,xl都使用span值
  // 比如让textarea始终占满一行
  // <AsFormItem label="备注" prop="remark" span="24">
  //   <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
  // </AsFormItem>
  const props = defineProps({
    span: {
      type: [String, Number],
      default: 0,
    },
    // <768px
    xs: {
      type: [String, Number],
      default: 24,
    },
    // >=768px
    sm: {
      type: [String, Number],
      default: 12,
    },
    // >=992px
    md: {
      type: [String, Number],
      default: 8,
    },
    // >=1200px
    lg: {
      type: [String, Number],
      default: 6,
    },
    // >=1920px
    xl: {
      type: [String, Number],
      default: 4,
    },
  })
  // 获取AsModal宽度
  const modalWidth = inject('modalWidth')
  const breakpoints = [
    { breakpoint: 768, value: 'xs' },
    { breakpoint: 992, value: 'sm' },
    { breakpoint: 1200, value: 'md' },
    { breakpoint: 1920, value: 'lg' },
    { breakpoint: Infinity, value: 'xl' },
  ]
  // 占比份数
  const itemPart = computed(() => {
    const breakpoint = breakpoints.find((bp) => modalWidth.value < bp.breakpoint)
    return Number(props.span) > 0 ? Number(props.span) : Number(props[breakpoint.value])
  })

  // 一份占比宽度
  const formItemWidth = computed(() => parseInt(modalWidth.value / 24))
</script>

<template>
  <div class="AsFormItem" :style="{ width: formItemWidth * itemPart - 30 + 'px', marginRight: '10px' }">
    <el-form-item v-bind="$attrs" inline>
      <template v-for="(_, slot) in $slots" #[slot]="slotProps" :key="slot">
        <div><slot :name="slot" v-bind="slotProps ?? {}"></slot></div>
      </template>
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
  .AsFormItem {
    display: inline-block;
  }
  :deep(.el-form-item__content > *) {
    width: 100%;
  }
  :deep(.el-form-item__content .el-select) {
    width: 100%;
  }
  :deep(.el-form-item__content .el-date-editor) {
    width: 100%;
  }
</style>
